<template>
	<view class="page-cont" :style="themeStore.theme">
		<navbar title="修改温度上下限"></navbar>
		<view class="main-cont" :style="{height: pageHeight}">
			<!-- 冷间切换 -->
			<view class="device-select" @click="handleOpen">
				<view class="device-name">{{deviceName}}</view>
				<image class="device-arrow" :src="isOpen ? '/static/up_black.png' : '/static/down_black.png'"></image>
			</view>
			<view class="form-cont">
				<uni-forms ref="updateForm" :value="formData" :rules="rules" labelPosition="top" labelWidth="200">
					<uni-forms-item label="上限温度" name="max" required>
						<uni-easyinput v-model="formData.max" clearable placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="下限温度" name="min" required>
						<uni-easyinput v-model="formData.min" clearable placeholder="请输入" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<!-- 按钮 -->
			<view class="btn-cont">
				<view class="btn-update" @click="handleSubmit">确认修改</view>
			</view>
		</view>
		<!-- 弹框选择项目 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="isOpen = false">
			<scroll-view class="popup-cont" scroll-y>
				<view class="popup-header">请选择</view>
				<view class="popup-title" v-for="(item, index) in deviceList" :key="index" @click="handleDeviceChange(item)">{{item.name}}</view>
			</scroll-view>
		</uni-popup>
		<!-- 提示框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="提示" content="是否确认修改？" @confirm="handleConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, watch, getCurrentInstance } from 'vue';
	import { onShow, onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
	import { storeToRefs } from 'pinia';
	import { useNavbar } from "@/utils/hooks.js";
	import { getDataHistory, getProjectConfList } from "@/api/home.js";
	import useHomeStore from '@/store/home';
	import useThemeStore from '@/store/theme';
	import FanChart from "./components/fan-chart.vue"
	const themeStore = useThemeStore();
	const homeStore = useHomeStore();
	const { proxy } = getCurrentInstance();
	const { pageHeight } = useNavbar();
	const { projectId, deviceId, deviceName, deviceType, deviceList, projectModus, projectType } = storeToRefs(homeStore);
	const popup = ref()
	const alertDialog = ref()
	const updateForm = ref()
	const confmapping = ref({})
	const isOpen = ref(false)
	const formData = reactive({
		max: '',//上限温度
		min: '',//下限温度
	});

	const rules = reactive({
		max: {
			rules: [{
				required: true,
				errorMessage: "请输入上限温度",
			},],
		},
		min: {
			rules: [{
				required: true,
				errorMessage: "请输入下限温度",
			},],
		},
	})

	onLoad(() => {
		deviceList.value.forEach(element => {
			if (element.id == deviceId.value) {

			}
		});
		getData();
	});

	function getData() {
		let params = {
			mid: projectId.value,
			type: 20,
			oid: deviceId.value
		}
		getProjectConfList(params).then(res => {

		});
	}

	// 下拉选择设备
	function handleOpen() {
		isOpen.value = true;
		popup.value.open();
	}
	// 设备切换
	function handleDeviceChange(item) {
		isOpen.value = false;
		popup.value.close();
		homeStore.setDeviceId(item.id);
		homeStore.setDeviceName(item.name);
		getData();
	}
	// 确定修改
	function handleSubmit() {
		alertDialog.value.open();
	}
	// 更新项目配置
	function handleConfirm() {
		updateForm.value.validate().then((valid = false) => {
			if (valid) {

			}
		});
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			position: relative;
			padding-bottom: 80px;
		}

		.device-select {
			height: 40px;
			line-height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			border-bottom: 1px solid #ccc;

			.device-name {
				color: #666;
				font-size: 14px;
			}

			.device-arrow {
				padding-left: 10px;
				width: 16px;
				height: 16px;
			}
		}

		.form-cont {
			margin: 10px;
			padding: 10px;
			border-radius: 5px;
			background-color: #fff;
		}

		.btn-cont {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 10px;

			.btn-update {
				height: 50px;
				line-height: 50px;
				color: #fff;
				font-size: 14px;
				text-align: center;
				border-radius: 5px;
				background-color: $theme-color;
			}
		}
	}

	.popup-cont {
		background: #fff;
		max-height: 80vh;

		.popup-title,
		.popup-header {
			height: 50px;
			line-height: 50px;
			color: #333;
			font-size: 14px;
			text-align: center;
			border-top: 1px solid #eee;
		}

		.popup-header {
			font-size: 16px;
			font-weight: 600;
		}
	}
</style>